<!--
 * @Author: your name
 * @Date: 2019-11-19 09:54:41
 * @LastEditTime: 2019-11-23 09:59:40
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \you-you-go\src\views\goods\GoodsList.vue
 -->
<template>
  <div class="yeye">
    <!-- 商品展示框 -->
    <div @click="Getid(item.id)" :key="index" v-for="(item,index) in GoodsList" class="shop">
      <img class="ImgList" :src="item.img_url" alt />
      <div class="Imgtitle">{{item.title}}</div>
      <div class="fotter">
        <span class="red">￥{{item.sell_price}}</span>
        <span class="black">￥{{item.market_price}}</span>
        <div class="fotterfotter">
          <span>热卖中</span>
          <span>剩{{item.stock_quantity}}件</span>
        </div>
      </div>
    </div>
  </div>
</template>
           
<script>
import { GoodsList } from '../../api/index'
export default {
  data() {
    return {
      GoodsList: []
    }
  },
  async created() {
    const { data: res } = await GoodsList()
    this.GoodsList = res.message
    // console.log(this.GoodsList);
  },
  methods: {
    Getid(id) {
      this.$router.push(`/goods/${id}`)
    }
  }
}
</script>
<style scoped>
.shop {
  display: inline-block;
  width: 45%;
  height: 400px;
  border: 1px solid #cccccc;
  margin: 20px 5px 20px 5px;
}

.yeye {
  width: 100%;
  padding: 10px;
}
.fotter {
  box-sizing: border-box;
  width: 100%;
  height: 20%;
  background-color: #ccc;
  padding: 10px;
}
.Imgtitle {
  width: 100%;
  height: 15%;
  margin-top: 20px;
}
.ImgList {
  width: 90%;
  height: 60%;
  margin: 0px 10px 0px 10px;
}
.red {
  color: red;
  font-size: 16px;
  margin-right: 15px;
}
.black {
  font-size: 14px;
  text-decoration: line-through;
}
.fotterfotter {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
</style>